// 引入包
const gulp = require("gulp"),
    htmlmin = require("gulp-htmlmin"),
    cleanCss = require("gulp-clean-css"),
    uglify = require("gulp-uglify"),
    babel = require("gulp-babel"),
    del = require("del"),
    connect = require("gulp-connect"),
    autoprefixer = require('gulp-autoprefixer'),
    sass = require("gulp-sass"),
    proxy = require("http-proxy-middleware")

const paths = {
    html: {
        src: "src/**/*.html",
        dest: "dist"
    },
    css: {
        src: "src/css/**/*.scss",
        dest: "dist/css"
    },
    js: {
        src: "src/js/**",
        dest: "dist/js"
    },
    img: {
        src: 'src/img/**',
        dest: 'dist/img'
    },
    libs: {
        src: "src/libs/**",
        dest: "dist/libs"
    },
    ico: {
        src: 'src/favicon.ico',
        dest: 'dist'
    }
}
const html = () => {
        return gulp.src(paths.html.src)
            .pipe(htmlmin({
                removeComments: true, //清除HTML注释
                collapseWhitespace: true, //压缩HTML
                collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
                removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
                minifyJS: true, //压缩页面JS
                minifyCSS: true //压缩页面CSS 
            }))
            .pipe(gulp.dest(paths.html.dest))
            .pipe(connect.reload()) //只要任务一重启，就reload
    }
    // 制定css任务：压缩css代码
const css = () => {
    return gulp.src(paths.css.src)
        .pipe(sass())
        .pipe(autoprefixer({
            presets: ['@babel/env']
        }))
        // .pipe(cleanCss())
        .pipe(gulp.dest(paths.css.dest))
        .pipe(connect.reload())
}

// 制定js任务：压缩js代码，混淆代码
const js = () => {
        return gulp.src(paths.js.src)
            .pipe(babel({
                presets: ['@babel/env']
            }))
            .pipe(uglify())
            .pipe(gulp.dest(paths.js.dest))
            .pipe(connect.reload())
    }
    // img任务，将img移动到dist中
const imgs = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

// 创建一个删除dist目录的任务
const delDist = () => del('dist/**')

// 指定一个watch任务，监听代码改变自动重启对应任务
const watch = () => {
        gulp.watch(paths.html.src, html)
        gulp.watch(paths.css.src, css)
        gulp.watch(paths.js.src, js)

    }
    // 制定一个service任务，开启本地服务器
const server = () => {
        connect.server({
            root: "dist",
            port: "3822", //2-5位数字
            livereload: true, //支持实时更新
            middleware() {
                return [
                    proxy.createProxyMiddleware("/antacom", {
                        target: 'http://www.anta.cn',
                        changeOrigin: true
                    }),
                    proxy.createProxyMiddleware("/api", {
                        target: 'http://www.xiongmaoyouxuan.com',
                        changeOrigin: true
                    })
                ]
            }

        })
    }
    // 制定一个ico任务，将ico引入到dist文件里面
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))
module.exports.default = gulp.series(delDist, gulp.parallel(html, css, js, imgs, libs, watch, server, ico))